<template>
  <div class="project-detail-overview">

    <div class="top">
      <div class="box-card">
        <div class="chart-title">
          <span>项目交付文档</span>
        </div>
        <div class="card-content">

          <div id="document" :style="{width: '300px', height: '300px'}"></div>

          <div class="block-view" style="height: 20px">
            <div class="block">
              <div class="green-block"></div>
              <span class="block-title">已交付文档</span>
              <span>{{getDocuments}}</span>
            </div>

            <div class="block">
              <div class="blue-block"></div>
              <span class="block-title">未交付文档</span>
              <span>{{noGetDicument}}</span>
            </div>
          </div>
        </div>
      </div>


      <div class="box-card" style="margin-left: 20px">
        <div class="chart-title">
          <div>
            <span>项目进度 </span>
            <span class="special">[{{datas.project_name}}]</span>
          </div>

        </div>
        <div class="card-content">
          <div id="progress" :style="{width: '300px', height: '300px'}"></div>

          <div class="block-view" style="height: 20px">
            <div class="block">
              <div class="blue-block"></div>
              <span class="block-title">未完成</span>
              <span>{{noGrogress}}</span>
            </div>

            <div class="block">
              <div class="green-block"></div>
              <span class="block-title">已完成</span>
              <span>{{grogress}}</span>
            </div>
          </div>
        </div>

      </div>

      <div class="box-card" style="margin-left: 20px;width: 100%;min-width: 500px;">
        <div class="chart-title">
          <span>项目耗时</span>
        </div>
        <div class="card-content">
          <div class="consumingView">
            <div class="progress-view">

              <progress-view :progress="getProgress()"></progress-view>

<!--              <el-progress :text-inside="true" :stroke-width="26" :percentage="getProgress()" :format="getFormat" :color="color_green"></el-progress>-->


              <div class="progress-text">
                <span>{{datas.reality_start_time?dateFormat1('yyyy-mm-dd',datas.reality_start_time):''}}</span>
                <div class="progress-text-center">
                  <span>{{limitProject}}</span>
                  <span>/{{datas.duration}}</span>
                </div>

                <span>{{datas.reality_end_time?dateFormat1('yyyy-mm-dd',datas.reality_end_time):dateFormat1('yyyy-mm-dd',datas.plan_end_time)}}</span>
              </div>
            </div>

            <div class="consumingView-bottom">
              <span>预计开始时间：{{datas.plan_start_time?dateFormat1('yyyy-mm-dd',datas.plan_start_time):''}}</span>
              <span>预计结束时间：{{datas.plan_end_time?dateFormat1('yyyy-mm-dd',datas.plan_end_time):''}}</span>
            </div>
          </div>

        </div>

      </div>

    </div>

    <div class="middle">

      <div class="box-card" style="width: 100%;box-sizing:border-box;">
        <div class="chart-title">
          <span>项目任务概述</span>
        </div>

        <!--        <div id="all-task" :style="{width: '300px', height: '300px'}"></div>-->
        <div style="display:flex;padding: 20px;padding-top: 0; padding-right: 0">

          <div>
            <pie-echart :datas="taskData"></pie-echart>

            <div class="block-view" style="height: 40px">
              <div class="block">
                <div class="clear-block"></div>
                <span class="block-title">全部任务</span>
                <span>{{allTask}}</span>
              </div>

              <div class="block">
                <div class="green-block"></div>
                <span class="block-title">已完成</span>
                <span>{{endTask}}</span>
              </div>

              <div class="block">
                <div class="light-blue-block"></div>
                <span class="block-title">进行中</span>
                <span>{{doingTask}}</span>
              </div>

              <div class="block">
                <div class="yellow-block"></div>
                <span class="block-title">未开始</span>
                <span>{{noTask}}</span>
              </div>
            </div>
          </div>

          <div style="margin-left: 40px">
            <div id="delay-task" :style="{width: '300px',minWidth: '300px', height: '300px', margin: '0 20px 0 20px'}"></div>

            <div class="block-view" style="height: 40px;padding: 0 20px;align-items: flex-start">
              <div class="block">
                <div class="red-block"></div>
                <p class="block-title">延期任务</p>
                <span>{{postponeTask}}</span>
              </div>

              <div class="block">
                <div class="blue-block"></div>
                <p class="block-title">正常任务</p>
                <span>{{normalTask}}</span>
              </div>

            </div>
          </div>


          <div id="chart_box" style="padding-top: 20px;padding-left:20px;height: 320px">
            <div style="display: flex;justify-content: flex-end">
              <div class="block-view" style="justify-content: flex-end;width: 150px;padding-right: 20px">
                <div class="block" style="justify-content: flex-end">
                  <div class="red-block"></div>
                  <span style="width: 40px" class="block-title">延期</span>
                </div>

                <div class="block" style="justify-content: flex-end">
                  <div class="blue-block"></div>
                  <span style="width: 40px" class="block-title">计划</span>
                </div>

              </div>
            </div>

            <div style="height: 320px; width: 100%; overflow-x: scroll">

              <div  :style="{'min-width':task_width,'height':'100%',width:task_width}">
                <div id="limit"></div>
              </div>


            </div>

          </div>

        </div>

      </div>


    </div>

    <div id="line_box" style="position: relative" class="box-card">
      <div class="chart-title">
        <span>人员任务完成情况</span>

        <div style="display: flex;justify-content: flex-end">
          <div class="block-view" style="justify-content: flex-end;width: 400px;padding-right: 20px">
            <div class="block" style="justify-content: flex-end;width: 33%">
              <div class="green-block"></div>
              <span style="width: 70px" class="block-title">已完成任务</span>
            </div>

            <div class="block" style="justify-content: flex-end;width: 33%">
              <div class="light-blue-block"></div>
              <span style="width: 70px" class="block-title">进行中任务</span>
            </div>

            <div class="block" style="justify-content: flex-end;width: 33%">
              <div class="yellow-block"></div>
              <span style="width: 70px" class="block-title">未开始任务</span>
            </div>
          </div>
        </div>
      </div>
      <div class="card-content" style=" top:10px;width:100%;height:300px;padding: 0; padding-bottom: 20px">
        <div id="member_task"></div>
      </div>

    </div>

    <div id="line_limit_box" style="position: relative" class="box-card">
      <div class="chart-title">
        <span>人员任务延期概况</span>

        <div style="display: flex;justify-content: flex-end">
          <div class="block-view" style="justify-content: flex-end;width: 200px;padding-right: 20px">
            <div class="block" style="justify-content: flex-end">
              <div class="red-block"></div>
              <span style="width: 70px" class="block-title">延期任务</span>
            </div>

            <div class="block" style="justify-content: flex-end">
              <div class="blue-block"></div>
              <span style="width: 70px" class="block-title">正常任务</span>
            </div>

          </div>
        </div>
      </div>
      <div class="card-content" style="top:10px;width:100%;height:300px;padding: 0; padding-bottom: 20px">
        <div id="member_limit"></div>
      </div>

    </div>

  </div>
</template>

<script>
    import pieEchart from "./pieEchart";
    import progressView from "./progressView";

    export default {
        name: "overview",
        components:{pieEchart,progressView},
        props:{
            datas:{
                type:Object,
                default:function () {
                    return{}
                }
            }
        },
        watch:{
            datas:{
                handler(newV,oldV){
                    if (newV){
                        //this.createDocumentChart()
                    }
                },
                immediate:true,
                deep:true
            }
        },
        data:function(){
            return{
                document_chart:null,
                documents:[],

                progress_chart:null,
                tasks:[],

                allTask_chart:null,
                taskData:null,

                delay_chark:null,

                limit_chark:null,

                memberTask_chark:null,

                memberLimit_chart:null,

                color_green:'#4ec99c',
                color_blue2:'#45aef8',
                color_blue:'#286ee6',
                color_yellow:'#f9d351',
                color_red:'#f2627d',

                limitProject:'',

                getDocuments:0,        //已交付文档
                noGetDicument:0,       //未交付文档
                grogress:0,            //已完成进度
                noGrogress:0,          //未完成进度
                allTask:0,             //全部任务
                endTask:0,             //已完成任务
                doingTask:0,           //进行中任务
                noTask:0,              //未开始任务
                normalTask:0,          //正常任务
                postponeTask:0,        //延期任务
                task_width:0,
            }
        },
        mounted:function(){

            this.initEcharts();

            this.dealData(this.datas.project_task);
            let width = (this.tasks.length + 1) * 65
            this.task_width = width < 850 ? '850px' :  width + "px"
            console.log(this.task_width)

            this.createDocumentChart()
            this.createProgressData();
            this.createAllTaskChart();
            this.createDelayTaskChart();
            this.createLimitChart()
            this.createMemberTaskChart()
            this.createMemberLimitChart()

            // this.limit_chark.resize()
            window.addEventListener('resize', () => {
                this.limit_chark.resize()
                this.memberTask_chark.resize()
                this.memberLimit_chart.resize()
            });
        },
        methods:{
            resize:function(){
                setTimeout(()=>{
                    this.limit_chark.resize()
                    this.memberTask_chark.resize()
                    this.memberLimit_chart.resize()
                },500)
            },
            getFormat:function(){
                let progress = 0

                if (this.datas.reality_start_time){
                    // let date = new Date(this.datas.reality_start_time).getTime()
                    // let date2 = new Date().getTime()
                    // if (this.datas.reality_end_time){
                    //
                    //     date2 = new Date(this.datas.reality_end_time).getTime()
                    // }
                    //
                    // let day = 60*60*24*1000
                    // let time = (date2 - date)/day + 1
                    // let num = Number(time.toFixed(0))
                    // let x = num/(this.datas.duration | 0)*100


                    let date = new Date(this.datas.reality_start_time.replace(/-/g,'/'))
                    let date2 = new Date()
                    let y = 0
                    if (this.datas.reality_end_time){
                        date2 = new Date(this.datas.reality_end_time.replace(/-/g,'/'))
                        y = 1;
                    }

                    var endTime = (date2.getTime() / 1000) - (date.getTime() / 1000);
                    var timeDay = parseInt(endTime / 60 / 60 / 24) + y;        //相差天数
                    if (date.toLocaleDateString() == date2.toLocaleDateString()){
                        timeDay = 0
                    }else {
                        timeDay = timeDay == 0 ? 1 : timeDay
                    }

                    let x = timeDay/(this.datas.duration | 0)*100
                    progress = x.toFixed(2) + "%"

                    this.limitProject = timeDay

                    //progress = Number(x.toFixed(2))
                }

                return progress
            },
            getProgress:function(){
                let progress = 0

                if (this.datas.reality_start_time){
                    // let date = new Date(this.datas.reality_start_time).getTime()
                    // let date2 = new Date().getTime()
                    // if (this.datas.reality_end_time){
                    //
                    //     date2 = new Date(this.datas.reality_end_time).getTime()
                    // }
                    //
                    // let day = 60*60*24*1000
                    // let time = (date2 - date)/day + 1
                    // let num = Number(time.toFixed(0))
                    // let x = num/(this.datas.duration | 0)*100

                    // let date = new Date('2021-11-26 00:00:00')
                    let str = this.datas.reality_start_time.slice(0,10) + " 00:00:00"
                    let date = new Date(str.replace(/-/g,'/'))
                    let date2 = new Date()
                    let y = 0
                    if (this.datas.reality_end_time){
                        date2 = new Date(this.datas.reality_end_time.replace(/-/g,'/'))
                        y = 1;
                    }

                    var endTime = (date2.getTime() / 1000) - (date.getTime() / 1000);

                    console.log(endTime)

                    var timeDay = parseInt(endTime / 60 / 60 / 24) + y;        //相差天数
                    if (date.toLocaleDateString() == date2.toLocaleDateString()){
                        timeDay = 0
                    }else {
                        timeDay = timeDay == 0 ? 1 : timeDay
                    }

                    let x = timeDay/(this.datas.duration | 0)*100

                    console.log(timeDay)

                    this.limitProject = timeDay
                    // var endTime = (date2.getTime() / 1000) - (date.getTime() / 1000);
                    // var timeDay = parseInt(endTime / 60 / 60 / 24) + 1;        //相差天数
                    // if (date.toLocaleDateString() == date2.toLocaleDateString()){
                    //     timeDay = 0
                    // }
                    //
                    // let x = timeDay/(row.duration | 0)*100

                    progress = Number(x.toFixed(2))
                }

                return progress
            },
            initEcharts:function(){
                this.document_chart = this.$echarts.init(document.getElementById('document'));

                this.progress_chart = this.$echarts.init(document.getElementById('progress'));

                this.delay_chark = this.$echarts.init(document.getElementById('delay-task'));


                let chart_box = document.getElementById('chart_box');
                let limit = document.getElementById('limit')

                this.chartssize(chart_box,limit,'300px');
                this.limit_chark = this.$echarts.init(limit);

                let line_box = document.getElementById('line_box');
                let member_task = document.getElementById('member_task')

                this.chartssize(line_box,member_task);
                this.memberTask_chark = this.$echarts.init(member_task);

                let line_limit_box = document.getElementById('line_limit_box');
                let member_limit = document.getElementById('member_limit')

                this.chartssize(line_limit_box,member_limit);
                this.memberLimit_chart = this.$echarts.init(member_limit);

            },
            createDocumentChart:function () {
                var option;

                option = {
                    width:"300px",
                    height:"300px",
                    tooltip: {
                        trigger: 'item'
                    },
                    // legend: {
                    //     bottom: '-2%',
                    //     left: 'center',
                    //     orient:'horizontal',
                    //     textStyle:{
                    //         fontSize:14
                    //     }
                    // },
                    title: {
                        zlevel: 0,
                        text: '',
                        top: '42%',
                        left: '48%',
                        textAlign: 'center',
                        textStyle: {
                            rich: {
                                value: {
                                    color: '#303133',
                                    fontSize: 24,
                                    lineHeight: 24,
                                },
                                name: {
                                    color: '#909399',
                                    fontSize: 18,
                                    lineHeight: 22,
                                },
                            },
                        },
                    },
                    series: [
                        {
                            zlevel: 1,
                            name: '项目文档',
                            type: 'pie',
                            radius: ['55%', '70%'],
                            avoidLabelOverlap: false,
                            itemStyle: {
                                borderColor: '#fff',
                                borderWidth: 5
                            },
                            label: {
                                backgroundColor:'#fff',
                                show: false,
                                position: 'center',
                                textStyle : {
                                    fontWeight : 300 ,
                                    fontSize : 16    //文字的字体大小
                                },
                                formatter:function (value) {
                                    return value.percent + '%\n' + value.name
                                },
                                padding: [5, 5, 5, 5],
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '20',
                                    fontWeight: 'bold',
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: []
                        }
                    ]
                };

                let num = 0;
                this.documents.forEach(item=>{
                    if (item.file && item.file.id){
                        num++
                    }
                })
                let num2 = this.documents.length-num;

                option.series[0].data = [
                    {value: num, name: '已交付文档(' + num + ")",itemStyle:{color: this.color_green}},
                    {value: num2, name: '未交付文档(' + num2 + ")",itemStyle:{color: this.color_blue2}},
                ]

                this.getDocuments = num;
                this.noGetDicument = num2;

                let pct = ((num/this.documents.length)*100).toFixed(2)
                if (!num){
                    pct = "0.00";
                }
                option.title.text = ['{value|' + pct + '%}', '{name|已交付}'].join('\n')

                option && this.document_chart.setOption(option);
            },
            createProgressData:function(){
                var option;

                option = {
                    width:"300px",
                    height:"300px",
                    tooltip: {
                        trigger: 'item'
                    },
                    // legend: {
                    //     bottom: '-2%',
                    //     left: 'center',
                    //     orient:'horizontal',
                    //     textStyle:{
                    //         fontSize:14
                    //     }
                    // },
                    title: {
                        zlevel: 0,
                        text: '',
                        top: '42%',
                        left: '48%',
                        textAlign: 'center',
                        textStyle: {
                            rich: {
                                value: {
                                    color: '#303133',
                                    fontSize: 24,
                                    lineHeight: 24,
                                },
                                name: {
                                    color: '#909399',
                                    fontSize: 18,
                                    lineHeight: 22,
                                },
                            },
                        },
                    },
                    series: [
                        {
                            zlevel: 1,
                            name: '任务进度',
                            type: 'pie',
                            radius: ['55%', '70%'],
                            avoidLabelOverlap: false,
                            itemStyle: {
                                borderColor: '#fff',
                                borderWidth: 5
                            },
                            label: {
                                backgroundColor:'#fff',
                                padding: [5, 5, 5, 5],
                                show: false,
                                position: 'center',
                                textStyle : {
                                    fontWeight : 300 ,
                                    fontSize : 16    //文字的字体大小
                                },
                                formatter:function (value) {
                                    return value.percent + '%\n' + value.name
                                }
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '20',
                                    fontWeight: 'bold',
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: []
                        }
                    ]
                };

                let num = 0;
                this.tasks.forEach(item=>{
                    if (item.status > 5){
                        num++
                    }
                })
                let num2 = this.tasks.length-num;

                option.series[0].data = [
                    {value: num, name: '已完成(' + num + ")",itemStyle:{color: this.color_green}},
                    {value: num2, name: '未完成(' + num2 + ")",itemStyle:{color: this.color_blue2}},
                ]

                this.grogress = num;
                this.noGrogress = num2

                let pct = ((num/this.tasks.length)*100).toFixed(2)
                if (!num){
                    pct = "0.00";
                }
                option.title.text = ['{value|' + pct + '%}', '{name|已完成}'].join('\n')
                option && this.progress_chart.setOption(option);
            },
            createAllTaskChart:function(){
                let num = 0;
                let num1 = 0
                let num2 = 0
                this.tasks.forEach(item=>{
                    if (item.status > 0 && item.status < 6 && item.status != 2){
                        num1++
                    }else if (item.status == 0){
                        num2++
                    }else if (item.status == 6){
                        num++
                    }
                })
                let pct = ((num/this.tasks.length)*100).toFixed(2)
                if (!num){
                    pct = "0.00";
                }
                let data = {
                    name:'项目任务',
                    data:[
                        {value: num, name: '已完成任务(' + num + ")",itemStyle:{color: this.color_green}},
                        {value: num1, name: '进行中任务(' + num1 + ")",itemStyle:{color: this.color_blue}},
                        {value: num2, name: '未开始任务(' + num2 + ")",itemStyle:{color: this.color_yellow}},
                    ],
                    pct:pct
                }

                this.allTask = this.tasks.length;
                this.endTask = num;
                this.doingTask = num1
                this.noTask = num2

                this.taskData = data
            },
            createDelayTaskChart:function(){
                var option;

                option = {
                    width:"300px",
                    height:"300px",
                    tooltip: {
                        trigger: 'item'
                    },
                    // legend: {
                    //     bottom: '-2%',
                    //     left: 'center',
                    //     orient:'horizontal',
                    //     textStyle:{
                    //         fontSize:14
                    //     }
                    // },
                    title: {
                        zlevel: 0,
                        text: '',
                        top: '42%',
                        left: '48%',
                        textAlign: 'center',
                        textStyle: {
                            rich: {
                                value: {
                                    color: '#303133',
                                    fontSize: 24,
                                    lineHeight: 24,
                                },
                                name: {
                                    color: '#909399',
                                    fontSize: 18,
                                    lineHeight: 22,
                                },
                            },
                        },
                    },
                    series: [
                        {
                            zlevel: 1,
                            name: '任务情况',
                            type: 'pie',
                            radius: ['55%', '70%'],
                            avoidLabelOverlap: false,
                            itemStyle: {
                                borderColor: '#fff',
                                borderWidth: 5
                            },
                            label: {
                                backgroundColor:'#fff',
                                padding: [5, 5, 5, 5],
                                show: false,
                                position: 'center',
                                textStyle : {
                                    fontWeight : 300 ,
                                    fontSize : 16    //文字的字体大小
                                },
                                formatter:function (value) {
                                    return value.percent + '%\n' + value.name
                                }
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '20',
                                    fontWeight: 'bold',
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: []
                        }
                    ]
                };

                // let num = 0;
                // this.tasks.forEach(item=>{
                //     if (item.status > 5){
                //         num++
                //     }
                // })
                // let num2 = this.tasks.length-num;
                //
                // option.series[0].data = [
                //     {value: num, name: '已完成(' + num + ")",itemStyle:{color: this.color_green}},
                //     {value: num2, name: '未完成(' + num2 + ")",itemStyle:{color: this.color_blue2}},
                // ]
                // let pct = ((num/this.tasks.length)*100).toFixed(2)
                // option.title.text = ['{value|' + pct + '%}', '{name|已完成}'].join('\n')

                let num = 0;
                this.tasks.forEach(item=>{
                    if (!item.delay_day){
                        num++
                    }
                })
                let num2 = this.tasks.length-num;
                option.series[0].data = [
                    {value: num2, name: '延期任务(' + num2 + ")",itemStyle:{color: this.color_red}},
                    {value: num, name: '正常任务(' + num + ")",itemStyle:{color: this.color_blue2}},
                ]

                this.normalTask = num
                this.postponeTask = num2

                let pct = ((num2/this.tasks.length)*100).toFixed(2)
                if (!num2){
                    pct = "0.00";
                }
                option.title.text = ['{value|' + pct + '%}', '{name|延期}'].join('\n')
                option && this.delay_chark.setOption(option);
            },
            createLimitChart:function(){
                let option = {
                    title: {
                        text: '',
                        // subtext: '数据来自网络'
                    },
                    color: [this.color_blue2, this.color_red],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        },
                        formatter:(params)=>{
                            let str = params[0].name + "(天)" + "<br />"
                            params.forEach(item=>{
                                str += item.marker + item.seriesName + ":" + item.data[1]
                                if (item.data[2] && item.seriesName === '实际'){
                                    str += '<span style="color: red">(' + item.data[2] + ')</span>'
                                }
                                str +="<br />"
                            })
                            return str
                        }
                    },
                    // legend: {
                    //     right:'0',
                    //     data: ['计划', '实际']
                    // },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        axisLabel: {
                            interval: 0,
                            rotate: -60 ,
                            fontSize:12,
                            formatter: function (value, index) {
                                let str
                                if (value.length > 6)
                                {
                                    str = value.slice(0,5) + "..."
                                }else {
                                    str = value
                                }
                                return str;
                            }
                        },

                    },
                    yAxis: {
                        type: 'value',
                        boundaryGap: [0, 0.01]
                    },
                    series: [
                        {
                            name: '计划',
                            type: 'bar',
                            barMaxWidth:'20',
                        },
                        {
                            name: '延期',
                            type: 'bar',
                            barMaxWidth:'20',
                        }
                    ]
                };

                // let title = ['计划1','计划2','计划31','计划4']
                // let data1 = [[0,12],[1,34],[2,17],[3,21]]
                // let data2 = [[0,15,3],[1,30,0],[2,15,0],[3,27,6]]

                let title = []
                let data1 = []
                let data2 = []
                let num = 0;

                this.tasks.forEach(item=>{

                    title.push(item.task_name);
                    let day = 60*60*24*1000
                    let start1 = new Date(item.start_date.replace(/-/g,'/'))
                    let end1 = new Date(item.end_date.replace(/-/g,'/'))

                    let x1 = (end1.getTime()-start1.getTime())/day + 1

                    data1.push([num,Math.floor(x1)])

                    // if (item.real_start_date){
                    //     let start2 = new Date(item.real_start_date)
                    //     let end2;
                    //     if (item.real_end_date){
                    //         end2 = new Date(item.real_end_date)
                    //     }else{
                    //         end2 = new Date()
                    //     }
                    //
                    //     let x2 = (end2.getTime()-start2.getTime())/day + 1
                    //
                    //     data2.push([num,Math.floor(x2),item.delay_day])
                    // }else{
                    //     data2.push([num,0,item.delay_day])
                    // }

                    data2.push([num,item.delay_day])
                    num++;

                })
                option.xAxis.data = title;
                option.series[0].data = data1
                option.series[1].data = data2

                option && this.limit_chark.setOption(option);

            },
            createMemberTaskChart:function(){
                let option = {
                    title: {
                        text: ''
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        },
                        formatter:(params)=>{
                            let str = params[0].name + "<br />"
                            params.forEach(item=>{
                                str += item.marker + item.seriesName + ":" + item.data + "%"
                                str +="<br />"
                            })
                            return str
                        }
                    },
                    // legend: {
                    //     right:'20',
                    //     data: ['已完成', '进行中', '未开始']
                    // },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: []
                    },
                    yAxis: [
                        {
                            type: 'value',
                            axisLabel: {
                                show: true,
                                interval: 'auto',
                                formatter: '{value} %'
                            },
                            show: true
                        }
                    ],
                    series: []
                };

                let member = []
                let series = [
                    {
                        name:'已完成',
                        type:'line',
                        data:[],
                        itemStyle:{
                            color:this.color_green
                        },
                        lineStyle:{
                            width:1
                        }
                    },
                    {
                        name:'进行中',
                        type:'line',
                        data:[],
                        itemStyle:{
                            color:this.color_blue
                        },
                        lineStyle:{
                            width:1
                        }
                    },
                    {
                        name:'未开始',
                        type:'line',
                        data:[],
                        itemStyle:{
                            color:this.color_yellow
                        },
                        lineStyle:{
                            width:1
                        }
                    }
                ]
                this.datas.member.forEach(item=>{
                    member.push(item.member_name)

                    let list = this.dealMemberTask(item)

                    series[0].data.push(list[0])
                    series[1].data.push(list[1])
                    series[2].data.push(list[2])
                })
                // member.push("测试1")
                // member.push("测试2")
                // member.push("测试3")
                //
                // series[0].data.push(15)
                // series[1].data.push(20)
                // series[2].data.push(65)
                //
                // series[0].data.push(27)
                // series[1].data.push(41)
                // series[2].data.push(32)
                //
                // series[0].data.push(58)
                // series[1].data.push(21)
                // series[2].data.push(21)

                option.xAxis.data = member
                option.series = series

                option && this.memberTask_chark.setOption(option);
            },
            createMemberLimitChart:function(){
                let option = {
                    title: {
                        text: ''
                    },
                    color: [this.color_blue2, this.color_red],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        },
                        formatter:(params)=>{
                            let str = params[0].name + "<br />"
                            params.forEach(item=>{
                                str += item.marker + item.seriesName + ":" + item.data + "%"
                                str +="<br />"
                            })
                            return str
                        }
                    },
                    // legend: {
                    //     right:'20',
                    //     data: ['正常任务', '延期任务']
                    // },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: []
                    },
                    yAxis: [
                        {
                            type: 'value',
                            axisLabel: {
                                show: true,
                                interval: 'auto',
                                formatter: '{value} %'
                            },
                            show: true
                        }
                    ],
                    series: []
                };

                let member = []
                let series = [
                    {
                        name:'正常任务',
                        type:'line',
                        data:[],
                        lineStyle:{
                            width:1
                        }
                    },
                    {
                        name:'延期任务',
                        type:'line',
                        data:[],
                        lineStyle:{
                            width:1
                        }
                    }
                ]
                this.datas.member.forEach(item=>{
                    member.push(item.member_name)


                    let list = this.dealMemberLimit(item)

                    series[0].data.push(list[0])
                    series[1].data.push(list[1])
                })

                // member.push("测试1")
                // member.push("测试2")
                // member.push("测试3")
                //
                // series[0].data.push(35)
                // series[1].data.push(65)
                //
                // series[0].data.push(27)
                // series[1].data.push(73)
                //
                // series[0].data.push(58)
                // series[1].data.push(42)

                option.xAxis.data = member
                option.series = series

                option && this.memberLimit_chart.setOption(option);
            },
            dealMemberTask:function(member){
                let list;
                let arr = []
                for (let i = 0; i < this.tasks.length; i++){
                    if (this.tasks[i].task_member_id.findIndex(a=>a == member.member_id) != -1){
                        arr.push(this.tasks[i])
                    }
                }
                if (arr.length){
                    let num = 0;    //已完成
                    let num1 = 0    //进行中
                    let num2 = 0;   //未开始

                    arr.forEach(item=>{
                        if (item.status > 0 && item.status < 6 && item.status != 2){
                            num1++
                        }else if (item.status == 0){
                            num2++
                        }else if (item.status == 6){
                            num++
                        }
                    })
                    list = [(num/arr.length*100).toFixed(2),(num1/arr.length*100).toFixed(2),(num2/arr.length*100).toFixed(2)]
                }else {
                    list = ['0.00','0.00','0.00']
                }

                return list;
            },
            dealMemberLimit:function(member){
                let list;
                let arr = []

                for (let i = 0; i < this.tasks.length; i++){
                    if (this.tasks[i].task_member_id.findIndex(a=>a == member.member_id) != -1){
                        arr.push(this.tasks[i])
                    }
                }

                let num = 0;    //正常

                if (arr.length){
                    arr.forEach(item=>{
                        if (!item.delay_day){
                            num++
                        }
                    })

                    let num1 = arr.length-num;

                    list = [(num/arr.length*100).toFixed(2),(num1/arr.length*100).toFixed(2)]
                }else {
                    list = ['0.00','0.00']
                }



                return list;
            },
            dealData:function (list) {
                for (let i = 0; i < list.length; i++){
                    this.tasks.push(list[i])
                    if (list[i].files && list[i].files.length > 0){

                        this.documents = this.documents.concat(list[i].files)
                    }
                    if (list[i].children && list[i].children.length > 0){
                        this.dealData(list[i].children)
                    }
                }
            },
            //为图表计算高度
            chartssize(container, charts , height) {
                function getStyle(el, name)
                {
                    if (window.getComputedStyle) {
                        return window.getComputedStyle(el, null);
                    } else {
                        return el.currentStyle;
                    }
                }
                let wi = getStyle(container, 'width').width;
                // let hi = getStyle(container, 'height').height;
                let hi = height ? height : '300px';
                charts.style.height = hi
            },
            getStyle(el,name){
                if(window.getComputedStyle){
                    return window.getComputedStyle(el,null);
                }else{
                    return el.currentStyle;
                }
            }
        }
    }
</script>

<style lang="scss">
  @import "@/assets/scss/views/projectManagement/list/details/overview.scss";

  #chart_box{
    width: calc( 100% - 700px);
    height: 320px;
  }
  #line_box{
    /*box-sizing:border-box;*/
    width: calc( 100% - 2px);
    height: 360px;
    /*padding: 20px 20px;*/
    margin-bottom: 20px;
  }

  #line_limit_box{
    width: calc( 100% - 2px);
    height: 360px;
    /*padding: 20px 20px;*/
  }
</style>
